/**
 * Created by hao.cheng on 2017/4/13.
 */
import React, { Component } from 'react';
import { Layout, Menu, Icon } from 'antd';
import { Link } from 'react-router';
import { HTTP, getDomain, getUserInfo } from '../utils'
import { menuList } from '../utils/api'
const { Sider } = Layout;
const SubMenu = Menu.SubMenu;

class SiderCustom extends Component {
    state = {
        collapsed: false,
        mode: 'inline',
        openKey: '',
        selectedKey: '',
        menuData: []
    };
    componentDidMount() {
        const _path = this.props.path;
        this.setState({
            openKey: _path.substr(0, _path.lastIndexOf('/')),
            selectedKey: _path
        });
        const userinfo = getUserInfo() || {}
        const roleId = userinfo.roleId
        const organNo = userinfo.organNo
        HTTP.post(menuList, {
            parentId: 0,
            roleId: roleId,
            organNo: organNo
        }, () => {}, (resp) => {
            this.setState({
                menuData: resp
            })
        })
    }
    componentWillReceiveProps(nextProps) {
        this.onCollapse(nextProps.collapsed);
    }
    onCollapse = (collapsed) => {
        this.setState({
            collapsed,
            mode: collapsed ? 'vertical' : 'inline',
        });
    };
    menuClick = e => {
        this.setState({
            selectedKey: e.key
        });

    };
    openMenu = v => {
        this.setState({
            openKey: v[v.length - 1]
        })
    };
    renderMenu = () => {
        return this.state.menuData.map((v, i) => {
            return (
                <SubMenu key={v.path} title={<span><Icon type="woman" /><span className="nav-text">{v.name}</span></span>}>
                    {
                        v.children.map((v, i) => {
                            return (
                                <Menu.Item key={v.path}><Link to={v.path}>{v.name}</Link></Menu.Item>
                            )
                        })
                    }
                </SubMenu>
            )
        })
    }

    render() {
        return (
            <Sider
                trigger={null}
                breakpoint="lg"
                collapsed={this.props.collapsed}
                style={{overflowY: 'auto'}}
            >
                <div className="logo" />
                <Menu
                    onClick={this.menuClick}
                    theme="dark"
                    mode={this.state.mode}
                    selectedKeys={[this.state.selectedKey]}
                    openKeys={[this.state.openKey]}
                    onOpenChange={this.openMenu}
                >
                    {
                        this.renderMenu()
                    }
                </Menu>
                <style>
                    {`
                    #nprogress .spinner{
                        left: ${this.state.collapsed ? '70px' : '206px'};
                        right: 0 !important;
                    }
                    `}
                </style>
            </Sider>
        )
    }
}

export default SiderCustom;
